﻿<MCard MaxWidth="450"
        Class="mx-auto">
    <MToolbar Color="cyan"
               Dark>
        <MAppBarNavIcon></MAppBarNavIcon>

        <MToolbarTitle>Inbox</MToolbarTitle>

        <MSpacer></MSpacer>

        <MButton Icon>
            <MIcon>mdi-magnify</MIcon>
        </MButton>
    </MToolbar>

    <MList ThreeLine>
        @foreach (var item in _items)
        {
            @if (item.Header != null)
            {
                <MSubheader>@item.Header</MSubheader>
            }
            else if (item.Divider)
            {
                <MDivider Inset="item.Inset"></MDivider>
            }
            else
            {
                <MListItem>
                    <MListItemAvatar>
                        <MImage Src="@item.Avatar"></MImage>
                    </MListItemAvatar>

                    <MListItemContent>
                        <MListItemTitle>@((MarkupString)item.Title)</MListItemTitle>
                        <MListItemSubtitle>@((MarkupString)item.SubTitle)</MListItemSubtitle>
                    </MListItemContent>
                </MListItem>
            }
        }
    </MList>
</MCard>

@code{
    private Item[] _items = new Item[]
    {
       new Item { Header="Today" },
       new Item
       {
           Avatar="https://cdn.masastack.com/stack/images/website/masa-blazor/lists/1.png",
           Title="Brunch this weekend?",
           SubTitle="<span class=\"text--primary\">Ali Connors</span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to hang out?"
       },
       new Item
       {
           Divider=true,
           Inset=true
       },
       new Item
       {
           Avatar="https://cdn.masastack.com/stack/images/website/masa-blazor/lists/2.png",
           Title="Summer BBQ <span class=\"grey--text text--lighten-1\">4</span>",
           SubTitle="<span class=\"text--primary\">to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I'm out of town this weekend."
       },
       new Item
       {
           Divider=true,
           Inset=true
       },
       new Item
       {
           Avatar="https://cdn.masastack.com/stack/images/website/masa-blazor/lists/3.png",
           Title="Oui oui",
           SubTitle="<span class=\"text--primary\">Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?"
       },
       new Item
       {
           Divider=true,
           Inset=true
       },
       new Item
       {
           Avatar="https://cdn.masastack.com/stack/images/website/masa-blazor/lists/4.png",
           Title="Birthday gift",
           SubTitle="<span class=\"text--primary\">Trevor Hansen</span> &mdash; Have any ideas about what we should get Heidi for her birthday?"
       },
       new Item
       {
           Divider=true,
           Inset=true
       },
       new Item
       {
           Avatar="https://cdn.masastack.com/stack/images/website/masa-blazor/lists/5.png",
           Title="Recipe to try",
           SubTitle="<span class=\"text--primary\">Britta Holt</span> &mdash; We should eat this: Grate, Squash, Corn, and tomatillo Tacos."
       }
    };

    class Item
    {
        public string Header { get; set; }
        public string Avatar { get; set; }
        public string Title { get; set; }
        public string SubTitle { get; set; }
        public bool Divider { get; set; }
        public bool Inset { get; set; }
    }
}